﻿@{
    ViewData["Title"] = "ShowEmployee";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h1>查看人员</h1>

<div style="margin:20px 20px">
    <div style="margin:60px 60px">

        <div class="layui-input-inline" style="float:left">
            <label class="layui-form-label">姓名：</label>
            <input style="width:150px" class="layui-input" id="EmployeeName" autocomplete="off">
        </div>

                <td>
                    <div class="layui-input-inline" style="float:left">
                        <label class="layui-form-label">部门：</label>
                        @* <input style="width:200px" class="layui-input" id="DepartId" autocomplete="off"> *@


                        <div class="layui-input-inline">
                            <div class="layui-form layui-row layui-col-space16">
                                <div class="layui-col-md6" style="width:300px">
                                    <select id="departId">
                                        <option value="">请选择</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                    </div>
                </td>

        <td>
            <div class="layui-input-inline" style="float:left">
                <label class="layui-form-label">员工状态：</label>
                @* <input style="width:200px" class="layui-input" id="EmployeeState" autocomplete="off"> *@
                <div class="layui-input-inline">
                    <div class="layui-form layui-row layui-col-space16">
                        <div class="layui-col-md6" style="width:300px">
                            <select id="EmployeeState">
                                <option value="">请选择</option>
                                <option value="试用员工">试用员工</option>
                                <option value="在职员工">在职员工</option>
                                <option value="实习员工">实习员工</option>
                                <option value="临时员工">临时员工</option>
                                <option value="调职员工">调职员工</option>
                                <option value="专家顾问">专家顾问</option>
                                <option value="返聘人员">返聘人员</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </td>

        <td>
            <div style="float:left">
                &emsp;
                <button type="button" class="layui-btn layui-btn-primary" id="searchBtn"><i class="layui-icon"></i> 查 询</button>
            </div>
        </td>

        </tr>

        <tr>
            <td>
                <button type="button" class="layui-btn layui-bg-red layui-btn layui-btn-primary" onclick="location.href='/Employee/AddEmployee';">增加</button>

                @* <button type="button" class="layui-btn layui-bg-red layui-btn layui-btn-primary">导出</button> *@

                <div class="layui-inline">
                    <a class="layui-btn layui-btn-danger layui-btn-normal delAll_btn">批量删除</a>
                </div>
            </td>
        </tr>
        </table>

        <table id="ID-table-demo-setRowChecked"></table>

        <div id="pagesbox"></div>

        <script>
            layui.use(['table', 'laypage'], function () {
                var table = layui.table;
                var laypage = layui.laypage;
                var $ = layui.$;
                var layer = layui.layer; // 添加layui弹出层模块

                var pageSize = 15; // 每页显示条数
                //获取列表
                function getListData(pageIndex) {
                    //获取查询条件
                    var EmployeeName = $('#EmployeeName').val();
                    var functionName = $('#functionName').val();
                    var DepartId = $('#departId').val();
                    var EmployeeState = $('#EmployeeState').val();
                    //ajax后台交互
                    $.ajax({
                            //http://10.31.60.18:8000/AuthorizationPeopleGetRout/api
                        url: 'http://10.31.60.18:8000/AuthorizationPeopleGetRout/api/RoleShow/ShowPageEmployeeInfo',
                        type: 'get',
                        dataType: 'json',
                        //参数
                        data: {
                            pageIndex: pageIndex,
                            pageSize: pageSize,
                            EmployeeName: EmployeeName,
                            DepartId: DepartId,
                            EmployeeState: EmployeeState,
                        },
                        success: function (res) {
                            table.render({
                                //挂载的表格id
                                elem: '#ID-table-demo-setRowChecked',
                                cols: [[
                                    { type: 'checkbox', width: 60, fixed: 'center', unresize: true, align: 'center' },
                                    { type: 'numbers', title: '员工编号', width: 60, fixed: 'center', unresize: true, align: 'center' },
                                    { field: 'employeeName', title: '姓名', width: 120, align: 'center' },
                                    { field: 'departName', title: '部门', width: 120, align: 'center' },
                                    { field: 'employeePhone', title: '联系方式', width: 120, align: 'center' },
                                    { field: 'employeeState', title: '员工状态', width: 120, align: 'center' },
                                    { field: 'createBy', title: '操作人', width: 120, align: 'center' },
                                    { 
                                        field: 'createDate', title: '操作时间', width: 120, align: 'center', templet: function (data) {
                                            if (data.createDate!=null) {
                                                return data.createDate.substring(0, 19)
                                            }
                                             else
                                             {
                                                return "";
                                             }
                                        }
                                    },
                                    { field: 'updateBy', title: '修改人', width: 120, align: 'center' },
                                    { 
                                        field: 'updateDate', title: '修改时间', width: 120, align: 'center', templet: function (data) { 
                                            if (data.updateDate != null) {
                                                return data.updateDate.substring(0, 19)
                                            }
                                            else { 
                                                return "";
                                            }
                                        }
                                    },
                                    { title: '操作', width: 120, align: 'center', templet: '#barDemo', fixed: 'right', unresize: true },
                                ]],
                                data: res.data
                            });

                            //分页
                            laypage.render({
                                //挂载的分页id
                                elem: 'pagesbox',
                                count: res.tatalCount,
                                limit: pageSize,
                                curr: pageIndex,
                                layout: ['prev', 'page', 'count', 'next', 'skip'],
                                jump: function (obj, first) {
                                    if (!first) {
                                        getListData(obj.curr);
                                    }
                                }
                            });

                        }
                    });
                }
                //点击事件触发显示功能   查询
                $('#searchBtn').on('click', function () {
                    getListData(1);
                });

                // 单删除
                function deleteData(EmployeeId) {
                    $.ajax({
                        url: `http://10.31.60.18:8000/AuthorizationPeopleSetRout/api/Employee/FalseDeleteEmployee?EmployeeId=${EmployeeId}`,
                        type: 'delete',
                        success: function (res) {
                            if (res > 0) {
                                layer.msg('删除成功');
                                getListData(1);
                            } else {
                                layer.msg('删除失败');
                                getListData(1);
                            }
                        },
                        error: function () {
                            layer.msg('删除请求失败');
                        }
                    });

                }

                // 监听工具条，实现删除功能
                table.on('tool(ID-table-demo-setRowChecked)', function (obj) {
                    var data = obj.data;
                    if (obj.event == 'edit') {
                        location.href = `/Employee/UpdateEmployee?employeeId=${data.employeeId}`;
                    }
                    if (obj.event == 'delete') {
                        layer.confirm('确定删除吗？', function (index) {
                            deleteData(data.employeeId); // 传递正确的数据项ID
                            layer.close(index);
                        });
                    }
                });

                // 批量删除
                $(".delAll_btn").click(function () {
                    var checkStatus = table.checkStatus('ID-table-demo-setRowChecked'),
                        data = checkStatus.data,
                        EmployeeId = "";
                    if (data.length > 0) {
                        for (var i in data) {
                            EmployeeId += data[i].employeeId + ",";
                        }
                        EmployeeId = EmployeeId.substring(0, EmployeeId.length - 1);
                        console.log(EmployeeId);
                        layer.confirm('确定删除选中的记录？', { icon: 3, title: '提示信息' }, function (index) {
                            $.ajax({
                                    //http://10.31.60.18:8000/AuthorizationPeopleGetRout/api
                                url: `http://10.31.60.18:8000/AuthorizationPeopleSetRout/api/Employee/AllFalseDeleteEmployee?EmployeeId=${EmployeeId}`,
                                type: 'put',
                                success: function (res) {
                                    if (res > 0) {
                                        layer.msg("批量删除成功");
                                        getListData(1);
                                    } else {
                                        layer.msg("批量删除失败");
                                    }
                                },
                                error: function () {
                                    layer.msg('批量删除请求失败');
                                }
                            });
                            layer.close(index);
                        });
                    } else {
                        layer.msg("请选择需要删除的记录");
                    }
                    console.log(checkStatus);
                });

                //绑定部门下拉框
                $(document).ready(function () {
                    $.ajax({
                        url: 'http://10.31.60.18:8000/AuthorizationGetRout/api/Cottage/DeparList',
                        type:'get',
                        dataType:'json',
                        success: function (res) {
                            var departDate = res;
                            var select = $('#departId');
                            $.each(departDate, function (index,item) {
                                var option = $('<option>').val(item.id).text(item.name);
                                select.append(option);
                            })
                            //手动触发 layui组件的渲染
                            layui.form.render('select');
                        },
                        error:function(){
                            console.error('Failed to fetch data for dropdown.')
                        }
                    })
                })

                //首次加载调用
                $(function () {
                    // 初始化加载数据
                    getListData(1);
                })
            });
        </script>
    </div>
    <script type="text/html" id="barDemo">
        <div class="layui-btn-container">
            <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
            <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</a>
        </div>
    </script>
</div>









